﻿/*///////////////////////////////////////////////////////////////////
//
// Youbiquitous Web Assets
// Copyright (c) Youbiquitous 2022
//
// Author: Youbiquitous Team
// v2.0.0 (April 22, 2022)
//
*/

/* REQUIRES ybq-defs.css for color and style definitions */

/**** Typography ****/
.bold {
    font-weight: 700;
}

.normal {
    font-weight: 400;
}

.italic {
    font-style: italic;
}

.tiny {
    font-size: 8pt;
    line-height: 5pt;
}

.text-lg {
    font-size: 130%;
}

.text-md {
    font-size: 110%;
}

.text-normal {
    font-size: 100%;
}

.text-sm {
    font-size: 87.5%;
}

.text-xs {
    font-size: 75% !important;
}

.truncatable {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.line-compact-12 {
    line-height: 12px;
}

.line-compact-15 {
    line-height: 15px;
}

/**** Buttons ****/
.btn-default {
    background: var(--app-dark);
    color: var(--app-light);
}

    .btn-default:hover {
        background: var(--app-grey);
        opacity: 0.9;
        color: var(--app-light);
    }


/**** Borders ****/
.bordered {
    border: solid 1px var(--app-dark);
}

.bordered-white {
    border: solid 1px var(--app-light);
}

.borderless {
    border: solid 0px;
}

.bordered-bottom {
    border-bottom: solid 1px var(--app-dark);
}

/**** Tones ****/

.opacity8 {
    opacity: .8;
}

.opacity7 {
    opacity: .65;
}

.opacity5 {
    opacity: .5;
}

.opacity3 {
    opacity: .3;
}

.whiten {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.darken {
    -webkit-filter: brightness(0);
    filter: brightness(0);
}

.bluish {
    filter: sepia(100%) hue-rotate(190deg) saturate(200%);
}

/**** Bootstrap Personalization ****/
.blockquote-footer::before {
    content: "\2014";
}

.jumbotron {
    padding: 50px;
    background-color: var(--app-lightgrey);
    color: var(--app-dark);
    border-radius: 14px;
}

button > i {
    margin-right: 5px;
    opacity: 0.8;
}

a.btn > i {
    margin-right: 5px;
    opacity: 0.8;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus {
    background: var(--app-hover);
    color: var(--app-dark);
}

input[type=text], input[type=date], input[type=number], input[type=password], input[type=email], textarea, select {
    color: var(--app-dark) !important;
    border-color: var(--app-dark) !important;
    font-weight: 400;
}

.password {
    -webkit-text-security: square;
}

hr {
    border: solid 2px var(--app-primary);
}

.form-floating {
    color: var(--app-primary) !important;
}

/**** File Upload ****/
.ybq-inputfile img {
    border: solid 1px var(--app-dark);
    cursor: pointer;
}

    .ybq-inputfile img:hover {
        opacity: .8;
    }

.ybq-inputfile-toolbar {
    margin-left: 10px;
}

.ybq-inputfile-placeholder {
    border: dashed 2px var(--app-dark);
    padding: 20px;
    font-size: 130%;
    text-align: center;
    cursor: pointer;
}

    .ybq-inputfile-placeholder:hover {
        opacity: .8;
    }

/**** Overlay ****/
.ybq-overlay {
    position: absolute;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.65;
}

/**** Cursors ****/
.plain-cursor {
    cursor: default;
}

/**** Tabs ****/
.nav-tabs {
    border-bottom: 1px solid var(--app-lightgrey);
}

.tab-content {
    margin-top: 2px;
    padding-top: 10px;
    /*border: solid 1px #111;*/
}

.nav-tabs > li > a.active {
    background: transparent !important;
    color: var(--app-primary) !important;
    font-weight: 700;
    border-bottom: 8px solid var(--app-primary) !important;
}

.nav-tabs > li > a {
    color: var(--app-dark) !important;
    border: 0 !important;
    cursor: pointer;
}

    .nav-tabs > li > a.disabled {
        color: var(--app-lightgrey) !important;
        border: 0 !important;
        cursor: default;
    }

/**** Switch pseudo-element ****/
.switch-success:checked {
    background-color: var(--app-success);
    border-color: var(--app-success);
    color: #000;
}

.switch-success {
    background-color: var(--app-light);
    border-color: var(--app-success);
}

/**** Layout ****/
.vcenter {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/**** Bootstrap sidebar ****/
.btn-toggle {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
    border: 0;
}

    .btn-toggle:hover,
    .btn-toggle:focus {
        color: rgba(0, 0, 0, .85);
        background-color: #d2f4ea;
        ba1ckground-color: #3399ff;
    }

    .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        transition: transform .35s ease;
        transform-origin: .5em 50%;
        /* DARK VERSION*/
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        /* LIGHT VERSION*/
        co1ntent: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    }

    .btn-toggle[aria-expanded="true"] {
        color: rgba(0, 0, 0, .85);
    }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
        }

.btn-toggle-nav a {
    display: inline-flex;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    text-decoration: none;
}

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
        background-color: #d2f4ea;
        backgrou2nd-color: #3399ff;
    }


.table {
    --bs-table-hover-bg: #d2f4ea;
}

.table-hover tbody tr {
    cursor: pointer;
} 